<script setup>
  import Syntax02Component2 from './Syntax02-component2.vue';
  import Syntax02Component3 from './Syntax02-component3.vue';
  import Syntax02Component4 from './Syntax02-component4.vue';
</script>
<template>
  <h2>基本语法02</h2>

  <div class="zhtt-demo-card">
    <div class="zhtt-demo-card-header">v-if控制显示隐藏</div>
    <div  class="zhtt-demo-card-body">
      变量<b>isShow={{isShow}}</b>
      <button type="button" v-on:click="updateIsShowValue" class="zhtt-btn">修改变量IsShow值</button>
      <h2 v-if="isShow">这里面是通过v-if控制显示隐藏区域</h2>
      <h2 v-if="!isShow" style="color:#a2a2a2;">内容已隐藏，请点击按钮显示</h2>
    </div>
    <div class="zhtt-demo-card-footer">
      语法：&lt;h2 v-if="isShow"&gt;
    </div>
  </div>
  <div class="zhtt-demo-card">
    <div class="zhtt-demo-card-header">v-for数据循环</div>
    <div  class="zhtt-demo-card-body">
     <table>
       <tr>
         <th style="padding:2px 4px;">姓名</th>
         <th style="padding:2px 4px;">年龄</th>
       </tr>
       <tr v-for="data in dataList">
         <td>{{data.name}}</td>
         <td>{{data.age}}</td>
       </tr>
     </table>
    </div>
    <div class="zhtt-demo-card-footer">
      语法：&lt;tr v-for="data in dataList"&gt;
    </div>
  </div>
  <div class="zhtt-demo-card">
    <div class="zhtt-demo-card-header">注册一个新组件</div>
    <div  class="zhtt-demo-card-body">
      <syntax02-component></syntax02-component>
    </div>
    <div class="zhtt-demo-card-footer">
      vue3使用：defineComponent
    </div>
  </div>
  <div class="zhtt-demo-card">
    <div class="zhtt-demo-card-header">注册一个新组件（方式二）</div>
    <div  class="zhtt-demo-card-body">
      <syntax02-component2></syntax02-component2>
    </div>
    <div class="zhtt-demo-card-footer">
      vue3使用：defineComponent
    </div>
  </div>
  <div class="zhtt-demo-card">
    <div class="zhtt-demo-card-header">注册一个新组件（方式三）</div>
    <div  class="zhtt-demo-card-body">
      <Syntax02-component3></Syntax02-component3>
    </div>
    <div class="zhtt-demo-card-footer">
      vue3使用：defineComponent
    </div>
  </div>
  <div class="zhtt-demo-card">
    <div class="zhtt-demo-card-header">注册一个新组件（方式四）</div>
    <div  class="zhtt-demo-card-body">
      <Syntax02-component4
          @handleClick="testFn"
          :onClick="testFn"
          :name="refTest"
      />
    </div>
    <div class="zhtt-demo-card-footer">
      vue3使用：defineComponent
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      isShow: true,
      dataList:[
        {name:'123',age:12},
        {name:'456',age:21},
        {name:'234',age:15},
      ],
      refTest:'【传给子组件的值】'
    }
  },
  methods: {
    updateIsShowValue(){
      this.isShow = !this.isShow;
    },
    testFn(v){
      console.log('父组件testFn：',v);
    },
    refTest(v){
      console.log('父组件refTest：',v);
    }
  }
}
</script>